<template>
    <transition name='up'>
        <footer class="component-footer-bar" v-show='showFooter'>
            <ul class="component-footer-bar__list">
                <li class="component-footer-bar__item"
                    v-for='(item,index) in routerLinks'
                    v-if='filterBizRole(item)'
                    @click="goRouter(item.name, item.text)"
                    :class='{active: index == active}'>
                    <span class='component-footer-bar__img'>
                        <img :src='item.img' v-show='index != active'>
                        <img :src='item.imgActive' v-show='index == active'>
                    </span>
                    <p class="component-footer-bar__text">{{ item.text }}</p>
                </li>
            </ul>
        </footer>
    </transition>
</template>

<script>
    import { Promise } from 'es6-promise'
    import { allApi } from '../api/api'
    import { getQueryString } from '../utils/utils'
    import  { mapGetters, mapActions }  from 'vuex'

    export default {
        props: {

        },
        data(){
            return {
                routerLinks:[{
                    name:'loan-in-index',
                    text:'借款',
                    img:require('../images/menu_borrow-inactive@3x.png'),
                    imgActive:require('../images/menu_borrow-active@3x.png')
                }/*,{
                    name:'square',
                    text:'贷款广场',
                    img:require('../images/tabbar_plaza-inactive@3x.png'),
                    imgActive:require('../images/tabbar_plaza-active@3x.png')
                },{
                    name:'car',
                    text:'信用卡',
                    img:require('../images/cretive-card@3x.png'),
                    imgActive:require('../images/creative-card-chose@3x.png')
                }*/,{
                    name:'user-index',
                    text:'账户',
                    img:require('../images/menu_account-inactive@3x.png'),
                    imgActive:require('../images/menu_account-active@3x.png')
                }],
                active:0,
                showFooter:false
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo',
            ]),
            userInfo(){
                return this.localInfo.userInfo
            },
            user(){
                return this.userInfo.user
            },
            noSquare(){
                let channel = getQueryString().channel
                if(channel == '51xinyongka2skyj') return true
                if(channel == 'yihe1scnyj') return true
                if(channel == 'yihe2scnyj') return true
                if(channel == 'yihe3scnyj') return true
                if(channel == 'xiaopangqianbaozttyj') return true
                if(channel == 'xiguayongqianzttyj') return true
                if(channel == 'quyouqiancynyj') return true
                if(channel == 'jie365cynyj') return true
                if(channel == 'huirongzhixuancynyj') return true
                if(channel == 'diyiqianzhuangcynyj') return true
                if(channel == 'fenxinxinyong191yj') return true
                if(channel == 'boluodai205yj') return true
                if(channel == 'miaodaoqian214yj') return true
                return false
            }
        },
        methods:{
            goRouter(name, text){
                if(name == 'car'){
                    // 大数据埋点
                    // let flag = false
                    // allApi.onEventLogger({
                    //     currentPageUrl: window.location.href,
                    //     currentPageName: document.title,
                    //     refererPageUrl: document.referrer + window.localStorage.getItem('currentUrl'),
                    //     refererPageName: window.localStorage.getItem('currentTitle'),
                    //     refererPageStamp: new Date().getTime() - window.localStorage.getItem('timer'),
                    //     eventType:'track_click',
                    //     eventName:'信用卡',
                    //     eventDescr:'用户点击tab',
                    //     eventParamsValue:JSON.stringify({
                    //         title:document.title
                    //     }),
                    // }).then(res => {
                    //   flag = true
                      // setTimeout(() => {
                        location.href = 'https://activity.kongapi.com/20171221xinyongka?channel=anniuyoujie&utm_source=anniuyoujie&utm_medium=annweixin#'
                      // }, 3000)
                    // })
                    // if (!flag) {
                    //   setTimeout(() => {
                    //     location.href = 'https://activity.kongapi.com/20171221xinyongka?channel=anniuyoujie&utm_source=anniuyoujie&utm_medium=annweixin#'
                    //   }, 500)
                    // }


                    return
                }
                if(name == 'square'){
                  var mobile = ''
                  if (this.localInfo.userInfo.user) {
                    mobile = this.localInfo.userInfo.user.mobile
                  } else {
                    mobile = ''
                  }
                  let flag = false
                     // 大数据埋点
                    // allApi.onEventLogger({
                    //     currentPageUrl: window.location.href,
                    //     currentPageName: document.title,
                    //     refererPageUrl: document.referrer + window.localStorage.getItem('currentUrl'),
                    //     refererPageName: window.localStorage.getItem('currentTitle'),
                    //     refererPageStamp: new Date().getTime() - window.localStorage.getItem('timer'),
                    //     eventType:'track_click',
                    //     eventName:'bhv_loan_market',
                    //     eventDescr:'贷款超市',
                    //     eventParamsValue:JSON.stringify({
                    //         title:document.title
                    //     }),
                    // }).then(() => {
                    //   flag = true
                      location.href = 'https://activity.kongapi.com/20171208daikuanchaoshi?channel=anniuyoujie&utm_source=anniuyoujie&utm_medium=annweixin'+'&mobile='+mobile+'#'
                    // })
                    // if (!flag) {
                    //   setTimeout(() => {
                    //       location.href = 'https://activity.kongapi.com/20171208daikuanchaoshi?channel=anniuyoujie&utm_source=anniuyoujie&utm_medium=annweixin'+'&mobile='+mobile+'#'
                    //   }, 500)
                    // }



                    return
                }
                if(name == this.$route.name) return
                let i = 1

                allApi.onEvent({
                    eventType:'track_click',
                    eventName:'Tab_c_i',
                    eventDescr:'用户点击tab',
                    eventValue:JSON.stringify({
                        title:text
                    }),
                })
                // 大数据埋点
                allApi.onEventLogger({
                    currentPageUrl: window.location.href,
                    currentPageName: document.title,
                    refererPageUrl: document.referrer + window.localStorage.getItem('currentUrl'),
                    refererPageName: window.localStorage.getItem('currentTitle'),
                    refererPageStamp: new Date().getTime() - window.localStorage.getItem('timer'),
                    eventType:'track_click',
                    eventName:'Tab_c_i',
                    eventDescr:'用户点击tab',
                    eventParamsValue:JSON.stringify({
                        title:document.title
                    }),
                })
                this.$router.replace({
                    name:name
                })
            },
            filterBizRole(item){
                if(!this.user){
                    if(this.noSquare && item.name == 'square'){
                        return false
                    }
                    return true
                }
                else{
                    if(!this.user.bizRole){
                        if(this.noSquare && item.name == 'square'){
                            return false
                        }
                        return true
                    }
                    if(this.user.bizRole == 'C'){
                        if(this.noSquare && item.name == 'square'){
                            return false
                        }
                        return true
                    }
                    if(this.user.bizRole == 'B'){
                        if(item.name == 'loan-in-index'){
                            return false
                        }
                        if(item.name == 'contac-index'){
                            return false
                        }
                        return true
                    }
                }
            },
            init(){
                let links = this.routerLinks
                let isShow = false
                _.each(links,(value,index)=>{
                    if(value.name == this.$route.name || this.$route.name == 'default'){
                        this.active = index
                        isShow = true
                        return false
                    }
                })
                // console.log(isShow)
                this.showFooter = isShow
            },
        },
        created() {
            this.init()
        },
        watch: {
            $route (newVal,oldVal){
                this.init()
            }
        }
    }
</script>

<style lang="scss">
    @import "../sass/_variables";
    @import "../sass/_extends";
    @import "../sass/_mixins";

    .component-footer-bar{
        z-index:1001;
        position: absolute;
        bottom:0;
        left:0;
        right:0;
        background: #FAFAFA;
        box-shadow: 0 0 8px 0 rgba(0,0,0,0.12), 0 8px 8px 0 rgba(0,0,0,0.24);
    }
    .component-footer-bar__list{
        display: flex;
    }
    .component-footer-bar__item{
        width: 15%;
        flex:1;
        text-align: center;
        padding: 8px 5px 6px 5px;
        &.active{
            .component-footer-bar__text{
                color:$importColor;
            }
        }
    }
    .component-footer-bar__img{
        display: block;
        width: 100%;
        height: 24px;
        text-align:center;
        img{
            width: 24px;
            height:24px;
        }
    }
    .component-footer-bar__text{
        padding-top: 6px;
        font-size: 12px;
    }

</style>
